

Page({
  data: {
    blockSize: 20,
    step: 10,
    Min: 0, //最小值
    Max: 100, //最大值
    leftValue: 0, //左边滑块默认值
    rightValue: 100, //右边滑块默认值
    leftShowValue: 0, //界面显示左边滑块默认值
    rightShowValue: 100, //界面显示右边滑块默认值
    leftWidth: '50', //左边滑块可滑动长度：百分比
    rightWidth: '50', //右边滑块可滑动长度：百分比
    sliderWidth: 0, // slider的宽度；
    setSliderLeftX: 0, // 设置的sliderdiv的left
    setSliderWidthX: 0// 设置的sliderdiv的width
  },

  onLoad(options) {
    var query = wx.createSelectorQuery(); // 如果是封装的组件的话，这边请注意写法不同哦；
    query.select('.slider-left').boundingClientRect((rect) => {
      this.setData({
        sliderWidth: rect.width,
        setSliderLeftX: (rect.width / this.data.Max * this.data.leftValue) + this.data.blockSize / 2 + 'px',
        setSliderWidthX: rect.width / this.data.Max * (this.data.rightValue - this.data.leftValue) - this.data.blockSize + 'px',
      })

    }).exec();

  },

  // 左边滑块滑动的值
  leftChange(e) {

    var that = this;
    that.setData({
      leftValue: e.detail.value //设置左边当前值
    })
    this.setSliderBgColor(e, 'left');
  },
  // 右边滑块滑动的值
  rightChange: function (e) {
    var that = this;
    that.setData({
      rightValue: e.detail.value,
    })
    this.setSliderBgColor(e, 'right');
  },

  setSliderBgColor(e, type) {
    if (type == 'left') { // 左边
      if (this.data.leftValue <this.data.rightValue) {
        console.log('拖左不超右边');
        this.setData({
          leftShowValue: e.detail.value,
        })
        this.setData({
          rightShowValue: this.data.rightValue,
        })
      } 
      if (this.data.leftValue ==this.data.rightValue){
        return;
      }
      // else {
      //   console.log('拖左超右边');
      //   this.setData({
      //     leftShowValue: this.data.rightValue,
      //   })
      //   this.setData({
      //     rightShowValue: e.detail.value,
      //   })
      // }
    } else { // 右边
      if (this.data.leftValue <this.data.rightValue) {
        console.log('拖右不超右边');
        this.setData({
          rightShowValue: e.detail.value,
        })
        this.setData({
          leftShowValue: this.data.leftValue,
        })
      }
      if (this.data.leftValue == this.data.rightValue) {
        return;
      }
      //  else {
      //   console.log('拖右超右边')
      //   this.setData({
      //     leftShowValue: e.detail.value,
      //   })
      //   this.setData({
      //     rightShowValue: this.data.leftValue,
      //   })
      // }
    }


    const v = this.data.sliderWidth / this.data.Max

    if (v * (this.data.rightShowValue - this.data.leftShowValue) - this.data.blockSize >= 0) {
      this.setData({
        setSliderLeftX: (v * this.data.leftShowValue) + this.data.blockSize / 2 + 'px',
        setSliderWidthX: v * (this.data.rightShowValue - this.data.leftShowValue) - this.data.blockSize + 'px',
      })
      // console.log(1)
    } else {
      this.setData({
        setSliderLeftX: (v * this.data.leftShowValue) + this.data.blockSize / 2 + 'px',
        setSliderWidthX: 0 + 'px',
      })

    }


  }
})
